<template>
  <view class="pj-step-container">

    <view class="pj-step-item" v-for="(item,index) in steps" :key="index">

      <view class="st-top">
        <view class="s-left" :style="{background:cutLeftBg(index)}"></view>
        <view class="s-center">
          <slot :step="item" :stepIndex="index">
            <view 
            :class="index <= current?'pj-step-circle':'pj-step-circle pj-step-circle-hollow' " 
            :style="{background:index <= current ? activeColor : inactiveColor}"
            />
          </slot>
        </view>
        <view class="s-right" :style="{background:cutRightBg(index)}"></view>
      </view>
		<view class="st-bottom-info" v-if="isMicroBean">
			{{item[field]}}
			<image :src="goldenBean" mode="widthFix" class="goldenBean-img"></image>
		</view>
	    <view class="st-bottom" v-if="!isMicroBean">
			{{item[field]}}
		</view>
    </view>

  </view>
</template>
<script>

/**
 * @property string activeColor 激活颜色
 * @property string inactiveColor 未激活背景颜色
 * @property string align row 横 column 竖 排列方式
 * @property string field 标题的字段名
 * @property number current 当前步骤
 * @property array [{field:'xx'}] steps 步骤条
 * @property boolean showTitle 是否展示标题
 * @property boolean hollow 是否显示镂空圆点样式
 */

export default {
	data(){
		return{
			goldenBean: 'https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/goldenBean.png',
		}
	},
  options: {
    virtualHost: true
  },

  props: {
	isMicroBean:{
		type:Boolean,
		default:true
	},
    activeColor:{
      type:String,
      default:'#FF9F01'
    },
	
    inactiveColor:{
      type:String,
      default:'#EEEEEE'
    },

    align:{
      type:String,
      default:'row'
    },

    field:{
      type:String,
      default:'label'
    },

    current:{
      type:Number,
      default:0
    },

    steps:{
      type:Array,
      default:()=>([])
    },

    showTitle:{
      type:Boolean,
      default:true
    },

    hollow: {
      type: Boolean,
      default: true
    }

  },

  methods:{

    cutLeftBg(index){
      let bg = this.inactiveColor

      if(index === 0) return 'none'

      if (index <= this.current){
        bg = this.activeColor
      }

      return bg;
    },

    cutRightBg(index){
      let bg = this.inactiveColor

      if (index === this.steps.length - 1) return 'none'

      if (index <= this.current - 1){
        bg = this.activeColor
      }

      return bg;
    }
  }
}
</script>

<style scoped lang="scss">


.pj-step-container{
  display: flex;

  .pj-step-item{
    align-items: center;
    flex: 1;

    .st-top{
      display: flex;
      align-items: center;
    }

    .st-bottom{
      margin-top: 10rpx;
      text-align: center;
	  font-weight: 500;
	  font-size: 24rpx;
	  color: #FF7C00;
    }
	.st-bottom-info{
		margin-top: 10rpx;
		text-align: center;
		font-weight: 500;
		font-size: 24rpx;
		white-space:nowrap;
		color: #666666;
		display: flex;
		align-items:center;
		.goldenBean-img{
			width:26rpx;
			height:26rpx;
			margin-left:10rpx;
		}
	}

    .s-left,.s-right{
      background: #EEEEEE;
      flex: 1;
      height: 9rpx;
    }

    .s-center{

      .pj-step-circle{
        border-radius: 100%;
        width: 26rpx;
        height: 26rpx;
        // background: #0DCB8B;
        position: relative;
      }
      
      .pj-step-circle-hollow{
        &:before{
          content: " ";
          position: absolute;
          width: 50%;
          height: 50%;
          background: #ffffff;
          border-radius: 100%;
          transform: translate(50%,50%);
        }
      }

    }


  }

}
</style>



